<template>
  <div class="container">
    <div class="tree-container">
      <el-tree
        :data="depts"
        :props="{label: 'name',children:'children'}"
        default-expand-all
        :expand-on-click-node="false"
      >
        <template #default="{data}">
          <el-row style="width: 100%">
            <el-col :span="21">{{ data.name }}</el-col>
            <el-col :span="3">
              <el-row style="text-align:right">
                <el-col :span="12">管理员</el-col>
                <el-col :span="12">
                  <el-dropdown trigger="click">
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="addDept('add')">添加部门</el-dropdown-item>
                      <el-dropdown-item @click.native="addDept('edit')">编辑部门</el-dropdown-item>
                      <el-dropdown-item @click.native="addDept('del')">删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>

      <MyDialog :visible.sync="dialogVisible" :list="sourceDepts" />
    </div>
  </div>
</template>

<script>
import { getDeptsList } from '@/api/department'
import { transformToTreeData } from '@/utils/index'
import MyDialog from './components/my-dialog.vue'
export default {
  components: {
    MyDialog
  },
  data() {
    return {
      depts: [],
      dialogVisible: false,
      sourceDepts: []
    }
  },
  created() {
    this.getDepts()
  },
  methods: {
    async getDepts() {
      const res = await getDeptsList()
      console.log(res)
      this.sourceDepts = res.data
      this.depts = transformToTreeData(res.data, 0)
    },
    addDept(type) {
      if (type === 'add') {
        console.log('添加部门')
        this.dialogVisible = true
      }
      if (type === 'edit') {
        console.log('编辑部门')
      }
      if (type === 'del') {
        console.log('删除部门')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  ::v-deep .el-tree{
    padding: 30px 140px;
    font-size: 14px;
  }
}

</style>
